<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no"
    />
    <title>添加和显示学生</title>
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/common.css" type="text/css" />
    <link rel="stylesheet" href="./css/index.css" type="text/css" />
  </head>
  <body>
    <div class="box">
      <!-- 点击添加用户按钮 -->
      <div class="btn-box">
        <button onclick="showDialog()">添加用户</button>
        <button onclick="showStudents()">显示用户</button>
      </div>
      <!-- 显示用户的表格 -->
      <table class="students-table">
        <tr class="t-header">
          <th>序号</th>
          <th>名称</th>
          <th>年龄</th>
          <th>性别</th>
          <th>备注</th>
        </tr>
      </table>
      <!-- 对话框 -->
      <div class="dialog">
        <form action="javascript:void(0)" class="form">
          <div class="form-item">
            <label for="username">用 户</label>
            <input type="text" id="username" class="username" placeholder="输入用户名" />
          </div>
          <div class="form-item">
            <label for="age">年 龄</label>
            <input type="text" id="age" class="age" placeholder="输入年龄" />
          </div>
          <div class="form-item">
            <label>性 别</label>
            <input type="radio" class="gender" name="gender" value="女" checked /><span>女</span>
            <input type="radio" class="gender" name="gender" value="男" /><span>男</span>
          </div>
          <div class="form-item btns">
            <div class="add-btn" onclick="addStudent()">添 加</div>
            <div class="cancel-btn" onclick="addCancel()">取 消</div>
          </div>
        </form>
      </div>
    </div>
    <script src="./js/utils.js"></script>
    <script src="./js/index.js"></script>
  </body>
</html>
